<template>
	<view class="container">
		<!-- <uni-card is-full :is-shadow="false">
			<text class="uni-h6">宫格组件主要使用场景如：商品推荐列表、热门内容等</text>
		</uni-card> -->
		
		
		<!-- <uni-section title="无边框带角标（3列）" type="line" padding> -->
			<uni-grid :column="2" :show-border="false" :square="false" @change="change">
				<uni-grid-item v-for="(item ,index) in list" :index="index" :key="index">
					<view class="grid-item-box">
						<image class="image" :src="item.url" mode="aspectFill" />
						<text class="album-title">{{item.title}}</text>
						<text class="album-info">{{item.count}} {{item.permission}}</text>
						<view v-if="item.badge" class="grid-dot">
							<uni-badge :text="item.badge" :type="item.type" />
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>
		
		
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				dynamicList: [],
				list: [{
						url: '/static/img/upload/plus-square.png',
						text: 'Grid 1',
						
						badge: '0',
						type: "primary"
					},
					{
						url: '/static/img/upload/tour.png',
						text: 'Grid 2',
						title:"家庭回忆",
						count:1314,
						permission:"私密",
						badge: '1',
						type: "success"
					},
					{
						url: '/static/img/upload/family2.png',
						text: 'Grid 3',
						badge: '99',
						type: "warning"
					},
					{
						url: '/static/img/upload/family3.png',
						text: 'Grid 4',
						title:"旧相片",
						permission:"私密",
						badge: '2',
						type: "error"
					},
					{
						url: '/static/img/upload/family4.png',
						text: 'Grid 5'
					},
					{
						url: '/static/img/upload/family5.png',
						text: 'Grid 6'
					},
					{
						url: '/static/c7.png',
						text: 'Grid 7'
					},
					{
						url: '/static/c8.png',
						text: 'Grid 8'
					},
					{
						url: '/static/c9.png',
						text: 'Grid 9'
					}
				]
			}
		},
		methods: {
			change(e) {
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++

				uni.showToast({
					title: `点击第${index+1}个宫格`,
					icon: 'none'
				})
			},
			add() {
				if (this.dynamicList.length < 9) {
					this.dynamicList.push({
						url: `/static/c${this.dynamicList.length+1}.png`,
						text: `Grid ${this.dynamicList.length+1}`,
						color: this.dynamicList.length % 2 === 0 ? '#f5f5f5' : "#fff"
					})
				} else {
					uni.showToast({
						title: '最多添加9个',
						icon: 'none'
					});
				}
			},
			del() {
				this.dynamicList.splice(this.dynamicList.length - 1, 1)
			}
		}
	}
</script>

<style lang="scss">
	.image {
		// height: 80%;		height: 80%;
		// height: 100%;
		// width: 80%;
		height: 137px;
		width: 137px;
				
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}
	
	.album-title{
		font-family: Source Han Serif CN;
		font-weight: 900;
		font-size: 14;
		font-variation-settings: "opsz" auto;
		color: #3D3D3D
	}
	
	.album-info{
		color: #BFBFBF;
		font-size: 14;
	}
	

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0px 0;
	}


	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>
